<template>
  <div>
    <div>
      <!-- <img src="http://qqwyfv2fz.hn-bkt.clouddn.com/b3.jpg" alt=""> -->
      <div class="topbox">
        <div class="pos-content">
          <div>
            <span>难度</span>
            <van-rate v-model="value" disabled/>
          </div>
          <div>1000+人已参与</div>
        </div>
      </div>
      <div style="padding:0 12px;">
        <div>
            <h5>快来测试你的医疗常识</h5>
        </div>
        <van-button type="info" round block to="ceshi">立即测试</van-button>
      </div>
    </div>
  <home-components></home-components>
  </div>
</template>
<script>
import { Button, Rate } from "vant";
import homeComponents from '../../components/homeComponents/index'
export default {
  components: {
    [Button.name]: Button,
    [Rate.name]: Rate,
    homeComponents
  },
  data() {
    return {
      value: 1
    };
  },
  created(){
      this.$store.state.showBottomNav = false;
  },
};
</script>
<style lang="less" scoped>
.topbox {
  background: url(http://qqwyfv2fz.hn-bkt.clouddn.com/b3.jpg);
  filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
  -moz-background-size: 100% 195px;
  background-size: 100% 195px;
  height: 195px;
  position: relative;
  .pos-content{
      padding: 0 12px 20px 12px ;
      background-color: #c9e4ff;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-between;
  }
}
</style>